<template>
  <div>
    <el-form ref="ruleForm" label-width="130px" class="demo-ruleForm">
      <el-form-item :label="$t('TabVolume_DataVolumeSettings')" prop="isSynchronize">
<!--        DataVolumeSettings:"数据卷设置",-->
        <el-button icon="iconfont icon-add" class="submit" size="mini" style="margin-left: 0" @click="addPort">添加</el-button>
      </el-form-item>
      <el-form-item label="" prop="port" v-for="(item, index) in portNum" :key="item">
        <p>
          <el-input :placeholder="$t('TabVolume_PleaseinputContainsDataVolume')" v-model="volumes[index].container" style="width: 40%;">
            <template slot="prepend">Container</template>
          </el-input>
          <button class="volumebtn btn1" @click.prevent="changeState('binding', index,  'Volume')" :class="volumes[index].binding === 'Volume' ? 'btnActive' : ''">Volume</button>
          <button class="volumebtn btn2" @click.prevent="changeState('binding', index,  'Bind')" :class="volumes[index].binding === 'Bind' ? 'btnActive' : ''">Bind</button>
          <el-button @click="delPort(item, index)" title="删除" type="danger" icon="iconfont icon-lajitong" style="margin-left: 10px; padding: 10px;" size="mini"></el-button>
        </p>
        <p style="margin-top: 10px">
          <el-input :placeholder="$t('TabVolume_Plesaeinputpathofthehost')" v-model="volumes[index].host" v-show="volumes[index].binding === 'Bind'" style="width: 40%;">
<!--            请输入宿主机对应的目录-->
            <template slot="prepend">Host</template>
          </el-input>
          <el-select v-model="volumes[index].host" :placeholder="$t('TabVolume_Pleaseinputvolumeofthehost')" v-show="volumes[index].binding === 'Volume'">
            <el-option :label="item.Name + ' - ' + item.Driver" :value="item.Name" v-for="item in volumesList" :key="item.Name"></el-option>
          </el-select>
          <button class="volumebtn btn1" @click.prevent="changeState('Writable', index, 'Writable')" :class="volumes[index].Writable === 'Writable' ? 'btnActive' : ''">可写</button>
          <button class="volumebtn btn2" @click.prevent="changeState('Writable', index, 'Read-only')" :class="volumes[index].Writable === 'Read-only' ? 'btnActive' : ''">只读</button>
        </p>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import post from '@/utils/post'
export default {
  data () {
    return {
      volumes: [], // 存放数据卷设置的数据
      portNum: [], // 用于存放添加的input序列，方便精准删除
      i: 0, // 一个状态，用于添加input时的标识
      volumesList: null // 存放宿主机数据卷列表
    }
  },
  watch: {
    // 监听vuex中是isupload是否变化为true，true则上传本组件的数据。
    '$store.state.isUpload': function () {
      if (this.$store.state.isUpload) {
        this.$store.commit('changeCrateData', ['volumes', this.volumes])
      }
    }
  },
  mounted () {
    // 请求数据卷列表
    const docker = 'curl --unix-socket /var/run/docker.sock -s "http:/v1.40/volumes"'
    post({ docker }, (res) => {
      this.volumesList = res.Volumes
    }, this)
  },
  methods: {
    // 改变binding，Writable的值
    changeState (key, index, value) {
      if (key === 'binding') {
        this.volumes[index].binding = value
      } else if (key === 'Writable') {
        this.volumes[index].Writable = value
      }
    },
    // 添加开放端口的input框
    addPort () {
      this.portNum.push(this.i)
      // binding: 'Volume', // 设置卷的挂载方式
      // Writable: 'Writable', // 设置卷是否可写
      this.volumes.push({ host: '', container: '', binding: 'Volume', Writable: 'Writable' })
      this.i++
    },
    // 删除开放端口的input框
    delPort (item, index) {
      this.portNum = this.portNum.filter(data => {
        return data !== item
      })
      this.volumes.splice(index, 1)
    }
  }
}
</script>

<style lang="scss" scoped>
.submit{
  background: #067FB5;
  color: #fff;
  margin-left: 30px;
}
.volumebtn{
  background: #067FB5;
  padding: 10px;
  font-size: 12px;
  color: #fff;
}
.btn1{
  border-radius: 5px 0px 0px 5px;
  margin-left: 10px;
}
.btn2{
  border-radius: 0px 5px 5px 0px;
}
.btnActive{
  background: #286090;
}
</style>
